<template>
  <div class="bg">
    <div class="box">
      <div class="nav"></div>
      <div class="title">
        <div class="logo">
          <img src="../../../../assets/img/main/hero.png" alt="" />
        </div>
        <div class="title-r" v-if="show">恭喜您，预约成功</div>
        <div class="title-r" v-else>已取消</div>
      </div>
      <div class="line"></div>
      <div class="banner">
        <div class="list">
          <div class="left">
            <span>就</span>
            <span>诊</span>
            <span>医</span>
            <span>院</span>
          </div>
          <span class="right"> {{ info.hospitalName }} </span>
        </div>
        <div class="list">
          <div class="left">
            <span>就</span>
            <span>诊</span>
            <span>科</span>
            <span>室</span>
          </div>
          <span class="right">{{ info.departmentName }} </span>
        </div>
        <div class="list">
          <div class="left">
            <span>就</span>
            <span>诊</span>
            <span>医</span>
            <span>生</span>
          </div>
          <span class="right"> {{ info.doctorName }}</span>
        </div>
        <div class="list">
          <div class="left">
            <span>就</span>
            <span>诊</span>
            <span>日</span>
            <span>期</span>
          </div>
          <span class="right"> {{ info.treatDate }} </span>
        </div>
        <div class="list">
          <div class="left">
            <span>就</span>
            <span>诊</span>
            <span>时</span>
            <span>间</span>
          </div>
          <span class="right"> {{ info.treatTime }}({{ info.week }}) </span>
        </div>
        <div class="list">
          <div class="left">
            <span>诊</span>
            <span>疗</span>
            <span>费</span>
          </div>
          <span class="right"> {{ info.treatFee }}元</span>
        </div>
        <div class="list">
          <div class="left">
            <span>挂</span>
            <span>号</span>
            <span>费</span>
          </div>
          <span class="right"> {{ info.registerFee }}元</span>
        </div>
        <div class="list">
          <div class="left">
            <span>就</span>
            <span>诊</span>
            <span>人</span>
          </div>
          <span class="right"> {{ info.name }}</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="time-list">
        <div class="time-name">取号时间</div>
        <div class="time-e">{{ info.qhtime }}</div>
        <div class="time-name">取号方式</div>
        <div class="time-e">{{ info.qhmode }}</div>
        <div class="time-name">坐诊地点</div>
        <div class="time-d">{{ info.spot }}</div>
      </div>
      <div class="footer">
        <div class="title1">注意事项</div>
        <div class="message">• 停诊将短信通知，请保持手机畅通</div>
        <div class="message2">• 实名制预约，就诊人的信息不符将无法取号</div>

        <div class="message">• 就诊前一天{{ info.stopOrderTime }}截止预约</div>
        <div class="message3">
          • 就诊前一天{{ info.stopCancelTime }}截止取消预约
        </div>
        <div class="bt">
          <div class="bt-left" @click="gomine()">个人中心</div>
          <div v-if="show" class="bt-right" @click="cancel()">取消预约</div>
          <div v-else class="bt-right">已取消</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { cancelOrderApi } from "@/service/api.js";
import { loginByWxOpenidApi } from "@/service/api.js";
import { orderDetailsApi } from "@/service/api.js";

var appid = "wx6a2e86c97378385b";
var okurl = encodeURI("http://loulijuan6.natapp1.cc/App_over");
var userInfo_url = `https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wx6a2e86c97378385b&scene=1000&template_id=pNoCC5XQnVQxVF3aibPgWg41RMlUqyGNPWzR7GBaJuo&redirect_url=http%3a%2f%2floulijuan6.natapp1.cc%2fApp_over&reserved=test#wechat_redirect`;
export default {
  name: "index",
  inject: ["reload"],

  data() {
    return {
      info: "",
      appinfo: "",
      orderId: "", //订单id
      token: "",
      apptoken: "",
      msg: "", //提示信息
      name: "",
      getname: "",
      show: true
    };
  },
  components: {},
  created() {
    localStorage.getItem("apptoken"),
      (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      // 拿取token
      (this.token = localStorage.getItem("token"));
    this.getname = JSON.parse(localStorage.getItem("name"));

    let infoo = JSON.parse(localStorage.getItem("info1"));
    // this.appinfo = JSON.parse(this.$route.query.appoInfo);
    // this.name=this.$route.query.name
    this.orderId = infoo.orderId;
    this.getorderInfo();
    console.log(this.orderId);
    console.log(this.appinfo);
    console.log(this.info);
    //      let ordertype = this.$route.query.type;
    //      if(ordertype==1){

    //      }else{
    // // if(infoo.url){
    // // //        Dialog.confirm({
    // // //   title: '订阅',
    // // //   message: '是否订阅河南预约挂号平台',
    // // // })
    // // //   .then(() => {
    // //     window.location.href = infoo.url;
    // // //   })
    // // //   .catch(() => {
    // // //     // on cancel
    // // //   });
    // //     }else{
    // //       console.log('没有url')
    // //     }
    //      }
  },
  methods: {
    getorderInfo() {
      orderDetailsApi({
        token: this.token,
        apptoken: this.apptoken,
        // hospitalId: "402882687602384101760267eebc0092",
        orderId: this.orderId
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);
          this.info = res.data;
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    // 去个人中心
    gomine() {
      this.$router.push({
        name: "Mine"
      });
    },

    // 取消预约
    cancel() {
      cancelOrderApi({
        token: this.token,
        apptoken: this.apptoken,
        orderId: this.orderId
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          // 成功
          Toast.fail({
            message: "已取消"
          });
          this.show = false;
        } else {
          if (res.code == 4002) {
          } else {
            Toast(res.msg);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bg {
  overflow-y: auto;
  .box {
    overflow-y: auto;

    .title {
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: center;
      line-height: 2rem;
      font-size: 0.45rem;
      margin-top: 1rem;
      .logo {
        width: 0.8rem;
        height: 0.6rem;
        margin-right: 0.2rem;
        img {
          width: 0.8rem;
          height: 0.7rem;
        }
      }
      .title-r {
        margin-top: -2px;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #07c6b4;
      }
    }
    .line {
      width: 100%;
      height: 0.2rem;
      background: #f7f7f7;
    }
    .banner {
      width: 100%;
      background: #ffffff;
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      .list {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        .left {
          margin-left: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
        }
        .right {
          margin-right: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .time-list {
      margin-left: 0.2rem;
      padding-bottom: 0.2rem;
      .time-name {
        font-size: 0.4rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        margin-top: 0.2rem;
        margin-bottom: 0.1rem;
      }
      .time-e {
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: black;
        margin-bottom: 0.2rem;
        width: 90%;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        padding-bottom: 0.1rem;
      }
      .time-d {
        width: 90%;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: black;
        padding-bottom: 0.1rem;
        margin-bottom: 10px;
      }
    }
    .footer {
      margin-left: 10px;
      .title1 {
        margin-top: 0.2rem;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #07c6b4;
        margin-bottom: 14px;
      }
      .message {
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .message2 {
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        // margin-bottom: 44px;
      }
      .message3 {
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        margin-bottom: 0.5rem;
      }
      .bt {
        display: flex;
        margin-bottom: 25px;
        .bt-left {
          width: 4rem;
          height: 1.2rem;
          background: #ffffff;
          border: 1px solid #07c6b4;
          border-radius: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #07c6b4;
          line-height: 1.2rem;
          text-align: center;
          margin-left: 0.5rem;
          margin-right: 0.5rem;
        }
        .bt-right {
          width: 4rem;
          height: 1.2rem;
          background: #07c6b4;
          font-size: 0.4rem;
          font-family: PingFang SC;
          margin-right: 0.5rem;
          font-weight: 500;
          color: #ffffff;
          border-radius: 0.2rem;
          text-align: center;
          line-height: 1.2rem;
        }
      }
    }
  }
}
</style>
